{% stylesheet %}
.page_container{
    height: 126px;
}
#header_box{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 126px;
    z-index: 999;
    background: #fff;
    font-family: var(--title_font_family);
}
#header_box .header_top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: static;
}
/*logo*/
#header_box .logo{
    order:2;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header_box .logo a{
    font-size: 25px;
    color: var(--title_color);
    font-family: var(--title_font);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
    letter-spacing: 1px;
}
#header_box .logo img{
    max-height: 60px;
    max-width: 140px;
}

/*导航*/
#header_box .nav_box{
    order:1;
    padding:6px 0 0;
    position:relative;
}
#header_box .nav {
    
}
#header_box .nav > ul{
    height: 40px;
    display: inline-flex;
    display: -webkit-inline-flex;
}
#header_box .nav > ul > li{
    margin: 0 20px ;
    display: block;
    list-style-type: none;
    position: relative;
    z-index: 99;
}
#header_box .nav > ul > li:first-child{
    margin-left:0;
}
#header_box .nav > ul > li > .nav-li-a{
    display: block;
    font-size: 16px;
    position:relative;
    height:40px;
    white-space: nowrap;
}
#header_box .nav > ul > li > .nav-li-a svg{
    margin-left: 5px;
}
#header_box .nav > ul > li > .nav-li-a:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 0;
    height: 3px;
    background-color: #333;
    transition: width .2s;
}
#header_box .nav li.on .nav-li-a:after,
#header_box .nav li .nav-li-a:hover:after{
    width:100%;
}
#header_box .nav > ul > li > .nav-child{
    position: absolute;
    left: -20px;
    top: 40px;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 0 2px #ddd;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s;
    max-height: calc(100vh - 126px);
    overflow: auto;
}
#header_box .nav > ul > li > .nav-child > a{
    display: block;
    line-height: 2;
    transition: all 0.3s;
    white-space: nowrap;
    color: #666;
}
#header_box .nav li .nav-child > a:hover{
    text-decoration: underline;
    color: var(--color-main);
}
#header_box .nav li.more_link,
#header_box .nav li.nav-child-three{
    position: static;
}
#header_box .nav li.nav-child-three .nav-child{
    width: 100%;
    left: 0;
    top:40px;
    box-shadow: 0 2px 2px #ddd;
    background: #fff;
    padding: 0;
    max-height: calc(100vh - 126px);
    overflow: auto;
}
#header_box .nav li.nav-child-three .container_wrapper{
    display: flex;
    flex-wrap:wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
#header_box .nav li.nav-child-three .nav-child dl{
    width: 25%;
    margin-bottom: 30px;
}
#header_box .nav li.nav-child-three .nav-child dl a{
    display: block;
    line-height: 2;
    transition: all 0.3s;
    position: relative;
}

#header_box .nav li.nav-child-three .nav-child dl a:hover{
    text-decoration: underline;
    color: #333;
}
#header_box .nav li.nav-child-three .nav-child dl dd a{
    font-size: 14px;
    color: #666;
}
#header_box .nav li.nav-child-three .nav-child dl dt{
    margin-bottom: 5px;
}
#header_box .nav li.nav-child-three .nav-child dl dt a{
    font-size: 16px;
}
#header_box .nav li.nav-child-three .container_wrapper > a{
    font-size: 16px;
}
#header_box .nav li.nav-child-three .nav-child dl dd a{
    font-size: 14px;
    color: #666;
}
#header_box .nav li.nav-child-three .nav-child dl dd a:hover{
    color: var(--color-main);
}
#header_box .nav > ul > li:hover > .nav-child{
    opacity: 1;
    visibility: visible;
}



#header_box .nav li.more_link .more_link_child{
    width: 100%;
    max-height: calc(100vh - 126px);
    overflow: auto;
    background: #fff;
    position: absolute;
    left: 0;
    box-shadow: 0 2px 2px #ddd;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
#header_box .nav li.more_link.on .more_link_child{
    opacity: 1;
    visibility: visible;
}
#header_box .nav > ul > li.more_link .more_link_child .container_wrapper{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
#header_box .nav > ul > li.more_link .more_link_child > .container_wrapper > .nav-child{
    padding: 30px 20px;
    width: 75%;
    box-sizing: border-box;
}
#header_box .nav > ul > li.more_link .more_link_child > .container_wrapper > .nav-child > a{
    display: block;
    height: 34px;
    line-height: 34px;
    color: #666;
}
#header_box .nav > ul > li.more_link .more_link_child > .container_wrapper > .nav-child > a:hover{
    color: #000;
}
#header_box .nav > ul > li.more_link .more_link_child ul{
    padding: 30px 0;
    width: 25%;
}
#header_box .nav > ul > li.more_link .more_link_child > .container_wrapper > ul > li > .nav-li-a{
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    transition: all 0.3s;
}
#header_box .nav > ul > li.more_link .more_link_child > .container_wrapper > ul > li > .nav-li-a:hover,
#header_box .nav > ul > li.more_link .more_link_child > .container_wrapper > ul > li.on > .nav-li-a{
    background: #f5f5f5;
}
#header_box .nav > ul > li.more_link .more_link_child li > .nav-li-a > svg{
    transform: rotate(-90deg);
}
#header_box .nav > ul > li.more_link .more_link_child li > .nav-child{
    opacity: 0;
    visibility: hidden;
    height: 0;
}






#header_box .nav li.more_link .nav-child dl{
    width: 33.3333%;
    margin-bottom: 30px;
}
#header_box .nav li.more_link .nav-child dl a{
    display: block;
    line-height: 2;
    transition: all 0.3s;
    position: relative;
}

#header_box .nav li.more_link .nav-child dl a:hover{
    text-decoration: underline;
    color: #333;
}
#header_box .nav li.more_link .nav-child dl dd a{
    font-size: 14px;
    color: #666;
}
#header_box .nav li.more_link .nav-child dl dt{
    margin-bottom: 5px;
}
#header_box .nav li.more_link .nav-child dl dt a{
    font-size: 16px;
}
#header_box .nav li.more_link .container_wrapper > a{
    font-size: 16px;
}
#header_box .nav li.more_link .nav-child dl dd a{
    font-size: 14px;
    color: #666;
}
#header_box .nav li.more_link .nav-child dl dd a:hover{
    color: var(--color-main);
}
#header_box .nav > ul > li > .nav-child,
#header_box .nav li.nav-child-three .nav-child,
#header_box .scroll_nav_box .nav li.more_link .more_link_child{
    max-height: calc(100vh - 80px);
}









#header_box .header_icon{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    width:240px;
    order:3;
}
#header_box .header_icon > a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-left: 30px;
    position: relative;
}
#header_box .header_icon > a svg{}
#header_box .header_icon > a.cart_icon span{
    min-width: 20px;
    height: 20px;
    background: #F00B0B;
    display: none;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    position: absolute;
    top: 50%;
    right: -10px;
    margin-top: -22px;
}


/*搜索*/
#header_box .header_search{
    order:0;
    padding:20px 0;
}
#header_box .header_search form{
    height:40px;
    width:240px;
    display: flex;
    align-items: center;
}
#header_box .header_search .search_btn{
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header_box .header_search .search_btn svg{
    opacity:0.4;
}
#header_box .header_search .search_btn:hover svg{
    opacity:1;
}
#header_box .header_search .search_txt{
    width: calc(100% - 40px);
    height: 40px;
    background:none;
}


/*货币切换*/
#header_box .currency_box{
    height:80px;
    position:relative;
    z-index:999;
    margin-left:30px;
}
#header_box .currency_txt{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--menu-color);
    letter-spacing: var(--nav_letter_spacing);
    font-size: 14px;
    height:80px;
    line-height:80px;
    cursor:pointer;
}
#header_box .drop_currency a {
    color: var(--menu-color);
    letter-spacing: var(--nav_letter_spacing);
    font-size: 14px;

  }
#header_box .currency_txt svg{
    width: 14px;
    fill: #333;
    margin-left: 5px;
}

#header_box .drop_currency{
    position:absolute;
    top:80px;
    left:0;
    padding:10px;
    width:120px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #e8e8e8;
    -webkit-transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    -webkit-transform: scale3d(1,0,1);
    transform: scale3d(1,0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
#header_box .drop_currency_on .drop_currency{
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
#header_box .currency_txt svg{
    -webkit-transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
#header_box .drop_currency_on .currency_txt svg{
    transform:rotate(-180deg);
}
#header_box .drop_currency li{
    list-style-type: none;
}
#header_box .drop_currency a{
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    /* color: #333; */
    margin: 0;
}
#header_box .drop_currency a:hover{
    background:#000;
    color:#fff;
}

#header_box .mobile_menu,
#header_box .mobile_menu_icon{
    display: none;
}





#header_box.scroll_fixed{
    height:auto;
}
#header_box.scroll_fixed .logo{
    order:0;
}
#header_box .scroll_nav_box{
    position: absolute;
    order:1;
    max-width: 600px;
    width: calc(100% - 600px);
    flex:1 1 0;
    opacity: 0;
    visibility: hidden;
}
#header_box.scroll_fixed .scroll_nav_box{
    position: initial;
    opacity: 1;
    visibility: visible;
}
#header_box.scroll_fixed .header_search{
    order:2;
}
#header_box.scroll_fixed .header_icon{
    order:3;
    width:auto;
}
#header_box.scroll_fixed > .nav_box{
    display:none;
}

#header_box.scroll_fixed .nav_box{
    padding:26px 0 0;  
    position:inherit;
}
#header_box.scroll_fixed .nav > ul{
    height:54px;
}
#header_box.scroll_fixed .nav li.nav-child-three .nav-child{
    top:80px;
}
#header_box.scroll_fixed .nav li .nav-li-a{
    height:54px;
    white-space: nowrap;
}
#header_box.scroll_fixed .nav li .nav-child{
    top:54px;
}
#header_box .header_top .menu_icon{
    display: none;
}
@media (max-width: 1200px){
    
}
@media (max-width: 992px){
    #header_box .currency_box,
    #header_box .scroll_nav_box,
    #header_box .nav_box{
        display: none;
    }
    #header_box .header_top .menu_icon a,
    #header_box .header_top .menu_icon{
        display: block;
        width: 28px;
        height: 28px;
    }
    #header_box .header_top{
        align-items: center;
        padding: 0 0 40px;
    }
    #header_box .header_search{
        position: absolute;
        left: 50px;
        bottom: 10px;
        padding: 0;
        width: calc(100% - 100px);
    }
    #header_box .header_search form{
        width: 100%;
    }
    #header_box .header_icon{
        width: auto;
    }
    #header_box .header_top .menu_icon{
        width: 115px;
    }
    #header_box.scroll_fixed{
        height: auto;
    }
    #header_box.scroll_fixed .header_top{
        padding: 0;
    }
    #header_box.scroll_fixed .header_search{
        display: none;
    }






    #header_box .mobile_menu{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
        display: block;
        font-family: var(--general_font_family);
        background: rgba(0, 0, 0, .5);
    }
    #header_box .mobile_menu .mobile_menu_wrapper{
        position: relative;
        height: 100vh;
        max-width: 300px;
        background: #fff;
        transform: translate(-300px,0);
        padding: 20px 0 60px;
        box-shadow: -9px 8px 16px 0 #5f5c5c;
        box-sizing: border-box;
        transition: all 0.3s;
    }
    #header_box .mobile_menu .mobile_menu_scroll{
        height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 0 50px;
        box-sizing: border-box;
    }
    #header_box .mobile_menu_on{
        opacity: 1;
        visibility: visible;
    }
    #header_box .mobile_menu_on .mobile_menu_wrapper{
        transform: translate(0,0);
    }
    .main_container{
        transition: all 0.3s;
    }
    .main_on{
        transform: translate(300px,0);
    }
    #header_box .mobile_menu .mobile_nav > ul > li{
        border-bottom: 1px solid #d4d4d4;
    }
    #header_box .mobile_menu .mobile_nav a{
        display: block;
        height: 50px;
        line-height: 50px;
        color: #000;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 15px;
    }
    #header_box .mobile_menu .mobile_nav a{
        letter-spacing: var(--nav_letter_spacing);
    }
    #header_box .mobile_menu .mobile_nav-item{
        position: relative;
        display: flex;
        align-items: center;
    }
    #header_box .mobile_menu .mobile_nav-item a{
        width: calc(100% - 50px);
    }
    #header_box .mobile_menu .mobile_nav_down{
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s;
    }
    #header_box .mobile_menu .mobile_nav > ul > li svg{
        transition: all 0.3s;
    }
    #header_box .mobile_menu .mobile_nav > ul > li.on > .mobile_nav-item > .mobile_nav_down svg{
        transform: rotate(-180deg);
    }
    #header_box .mobile_menu .mobile_nav > ul > li .child_mobile_nav li.on .mobile_nav-item .mobile_nav_down svg{
        transform: rotate(-180deg);
    }

    #header_box .mobile_menu .child_mobile_nav{
        opacity: 0;
        visibility: hidden;
        height: 0;
        background: #f5f5f5;
        overflow: hidden;
    }
    #header_box .mobile_nav li.on > .child_mobile_nav{
        opacity: 1;
        visibility: visible;
        height: auto;
    }
    #header_box .mobile_nav li > .child_mobile_nav li{

    }
    #header_box .mobile_menu .child_mobile_nav li a{
        width: calc(100% - 50px);
        padding: 0 ;
        box-sizing: border-box;
        padding-left: 30px;
    }
    #header_box .mobile_menu .child_mobile_nav li .child_mobile_nav li a{
        width: 100%;
        padding-left: 45px;
    }
    

    #header_box .mobile_currency{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        left: 20px;
        bottom: 20px;
        width: calc(100% - 40px);
        height: 40px;
        border: 1px solid #d4d4d4;
        box-sizing: border-box;
    }
    #header_box .mobile_currency-select{
        width: 100%;
        height: 40px;
        padding: 0 10px;
        background: none;
        font-family: var(--general_font_family);
        appearance: none;
        border: 0;
        color: #000;
    }
    #header_box .mobile_currency svg{
        fill: #000;
        position: absolute;
        right: 10px;
        top: 11px;
    }
    #header_box .header_icon > a.cart_icon span{
        right: -3px;
    }
}
@media (max-width: 768px){
    #header_box .header_search{
        width: calc(100% - 60px);
        left: 30px;
    }
}
@media (max-width: 767px){
    #header_box .header_search{
        width: calc(100% - 30px);
        left: 15px;
    }
}
{% endstylesheet %}

{% if section and section.type == "header" %}
{% assign section = section %}
{% assign router = section.router %}
{% else %}
{% assign section = global.sections.header %}
{% assign router = routes.current_route %}
{% endif %}

{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}

<div class="page_container">
    <div id="header_box" class="control-all-header-fixed">
        <div class="header_wrapper container_wrapper">
            <div class="header_top ">
                <div class="menu_icon"><a href="javascript:void(0);">{% include icon_header_cate ,{width:'28',height:'28'} %}</a></div>
                <div class="logo">
                    <a href="/">
                    {% if section.settings.logo_pic.src %}
                    <img src="{{ section.settings.logo_pic.src  | image_url:'600x600' }}" alt="{{ section.settings.logo_pic.alt}}">
                    {% else %} 
                    {{ storeConfig.name }}
                    {% endif %}
                    </a>
                </div>
                <div class="header_search">
                    <form class="control-all-search" action="/search" onsubmit="return oemsaasSearch('.search_txt')" style="background-color: {{ section.settings.header_search_bg }};">
                        <button class="search_btn" type="submit">{% include icon_header_search ,width:'18',height:'18',color: section.settings.header_search_svg %}</button>
                        <input class="search_txt"  type="text" name="q" placeholder="{{ section.settings.search_placeholder }}" style="color: {{ section.settings.header_search_text }};">
                    </form>

                </div>
                <div class="header_icon">
                    {% if section.settings.is_currency %}
                    <div class="currency_box" style="--menu-color:{{section.settings.menu_color}}">
                        <div class="currency_txt" id="currencyBox">{{ currency.standard_code }}
                            <svg t="1636003081626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="{{section.settings.menu_color}}" p-id="2400"></path></svg>
                        </div>
                        <div class="drop_currency" id="currencyCon">
                            <ul class="currency">
                                {% get_currencies limit=100 %}
                                {% for list in currencies %}
                                <li>
                                    <a href="javascript:void(0);" class="web-currency" data-type="{{ list.standard_code }}" rel="nofollow">
                                        <span>{{ list.standard_code }}</span><span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                                    </a>
                                </li>
                                {% endfor %}
      
                            </ul>
                        </div>
                        <script>
                            $("#currencyBox").click(function (e) {
                                e.stopPropagation();
                                if ($('.currency_box').hasClass('drop_currency_on')) {
                                    $('.currency_box').removeClass('drop_currency_on');  
                                } else {
                                    $('.pop_search').removeClass('pop_search_on');
                                    $('.currency_box').addClass('drop_currency_on');
                                }
                            });
                            $('.drop_currency').click(function (e) {
                                e.stopPropagation();
                            });
                            $(document).click(function () {
                                $('.currency_box').removeClass('drop_currency_on');
                            });
                        </script>
                    </div>
                    {% endif %}  
                    {% if section.settings.is_member %}
                    <a class="account_icon" href="/account/login">
                        {% include icon_header_account ,{width:'26',height:'26'} %}
                    </a>
                    {% endif %}
                    <a class="cart_icon" {% if page_ca != 'cart_list' %} id="cart_icon" {% endif %} href="javascript:void(0);">
                        {% include icon_header_cart ,{width:'28',height:'28'} %}
                        <span id="cart_number"></span>
                    </a>
                </div>
                <div class="scroll_nav_box">
                    <div class="nav_box">
                        <div class="container_wrapper">
                            <div class="nav" id="scroll_nav" style="--menu-color:{{section.settings.menu_color}}">
                                <ul>
                                    {% if section.settings.nav.id %}
                                    {% for item in header_nav.nav_item %}
                                    
                                    <li class="nav-li">
                                        {% if item.children %}
                                        {% include "nav_a",class:'nav-li-a' , nav : item %}
                                        <div class="nav-child">
                                            {% for el in item.children %}
                                            {% if el.children %}
                                            {% if forloop.first == true %}<div class="container_wrapper">{% endif %}
                                            <dl>
                                                <dt>
                                                    {% include "nav_a", nav : el %}
                                                </dt>
                                                {% for ddItem in el.children %}
                                                <dd>
                                                    {% include "nav_a", nav : ddItem %}
                                                </dd>
                                                {% endfor %}
                                            </dl>
                                            {% if forloop.last == true %}</div>{% endif %}
                                            {% else %}
                                            {% include "nav_a", nav : el %}
                                            {% endif %}
                                            {% endfor %}

                                        </div>
                                        {% else %}
                                        {% include "nav_a",class:'nav-li-a' , nav : item %}
                                        {% endif %}
                                    </li>
                                    {% endfor %}

                                    {% else %}
                                    <li class="nav-li"><a class="nav-li-a" href="/" >Home</a></li>
                                    <li class="nav-li"><a class="nav-li-a" href="/" >Woman</a></li>
                                    <li class="nav-li"><a class="nav-li-a" href="/" >New</a></li>
                                    <li class="nav-li"><a class="nav-li-a" href="/" >Tops</a></li>
                                    <li class="nav-li"><a class="nav-li-a" href="/" >Dresses</a></li>
                                    <li class="nav-li"><a class="nav-li-a" href="/" >Sale</a></li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="nav_box">
            <div class="container_wrapper">
                <div class="nav" id="nav" style="--menu-color:{{section.settings.menu_color}}">
                    <ul>
                        {% if section.settings.nav.id %}
                        {% for item in header_nav.nav_item %}
                        
                        <li class="nav-li">
                            {% if item.children %}
                            {% include "nav_a",class:'nav-li-a' , nav : item %}
                            <div class="nav-child">
                                {% for el in item.children %}
                                {% if el.children %}
                                {% if forloop.first == true %}<div class="container_wrapper">{% endif %}
                                <dl>
                                    <dt>
                                        {% include "nav_a", nav : el %}
                                    </dt>
                                    {% for ddItem in el.children %}
                                    <dd>
                                        {% include "nav_a", nav : ddItem %}
                                    </dd>
                                    {% endfor %}
                                </dl>
                                {% if forloop.last == true %}</div>{% endif %}
                                {% else %}
                                {% include "nav_a", nav : el %}
                                {% endif %}
                                {% endfor %}

                            </div>
                            {% else %}
                            {% include "nav_a",class:'nav-li-a' , nav : item %}
                            {% endif %}
                        </li>
                        {% endfor %}

                        {% else %}
                        <li class="nav-li"><a class="nav-li-a" href="/" >Home</a></li>
                        <li class="nav-li"><a class="nav-li-a" href="/" >Woman</a></li>
                        <li class="nav-li"><a class="nav-li-a" href="/" >New</a></li>
                        <li class="nav-li"><a class="nav-li-a" href="/" >Tops</a></li>
                        <li class="nav-li"><a class="nav-li-a" href="/" >Dresses</a></li>
                        <li class="nav-li"><a class="nav-li-a" href="/" >Sale</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
        <!-- 搜索 -->

        <!-- 移动端菜单 -->
        <div class="mobile_menu">
            <div class="mobile_menu_wrapper">
                <div class="mobile_menu_scroll">
                    <div class="mobile_nav">
                        <ul>
                            {% if section.settings.nav.id %}
                            {% for item in header_nav.nav_item %}
                            <li>
                                {% if item.children %}
                                <div class="mobile_nav-item">
                                    {% include "nav_a", nav : item  %}
                                    <span class="mobile_nav_down">
                                        {% include icon_arrow_down ,{width:'14',height:'14'} %}
                                    </span>
                                </div>
                                <ul class="child_mobile_nav">
                                    
                                    {% for el in item.children %}
                                    <li>
                                        {% if el.children %}
                                        <div class="mobile_nav-item">
                                            {% include "nav_a", nav : el  %}
                                            <span class="mobile_nav_down">
                                                {% include icon_arrow_down ,{width:'14',height:'14'} %}
                                            </span>
                                        </div>
                                        <ul class="child_mobile_nav">
                                            {% for ddItem in el.children %}
                                            <li>
                                                {% include "nav_a", nav : ddItem  %}
                                            </li>
                                            {% endfor %}
                                        </ul>
                                        {% else %}
                                        {% include "nav_a", nav : el  %}
                                        {% endif %}
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% else %}
                                {% include "nav_a", nav : item  %}
                                {% endif %}
                            </li>
                            {% endfor %}
                            {% else %}
                            <li><a href="/">Home</a></li>
                            <li><a href="/">Woman</a></li>
                            <li><a href="/">New</a></li>
                            <li><a href="/">Tops</a></li>
                            <li><a href="/">Dresses</a></li>
                            <li><a href="/">Sale</a></li>
                            {% endif %}
                            
                        </ul>
                    </div>
                </div>
                

                {% if section.settings.is_currency %}
                <div class="mobile_currency">
                    <select class="mobile_currency-select">
                        {% get_currencies limit=100 %}
                        {% for list in currencies %}
                        <option value="{{ list.standard_code }}">
                            {{ list.standard_code }} : {{ list.symbol_left }}{{ list.symbol_right }}
                        </option>
                        {% endfor %}
                    </select>
                    {% include icon_arrow_down ,{width:'14',height:'14'} %}
                </div>
                {% endif %}
            </div>
        </div>
      
    </div>
</div>
  

<script type="text/javascript">
	$(function(){
        $('#nav > li').hover(function(){
            $(this).addClass('on');
        },function(){
            $(this).removeClass('on');
        })
        var p = 0,
            t = 0;
        $(window).scroll(function(){
            p = $(this).scrollTop();
            if(t<=p){
                $('#header_box').addClass('scroll_fixed');
            }else{
                $('#header_box').removeClass('scroll_fixed');
            }
            setTimeout(function(){t = p;},0);
        })
    

        $('.nav-child').each(function(){
            if($(this).find('dl').length > 0){
                $(this).parents('li').addClass('nav-child-three');
            }
        })




        $('.mobile_nav_down').click(function(){
            if($(this).parent().parent().hasClass('on')){
                $(this).parent().parent().removeClass('on');
            }else{
                $(this).parent().parent().addClass('on');
            }
            
        })
        $('.mobile_currency-select').val("{{currency.standard_code}}")
        $('.mobile_nav-item svg').click(function(){
            $(this).parent().siblings(".child_mobile_nav").slideToggle()
		})
        $('.mobile_currency-select').change(function(params) {
            currencyPath($(this).val())
        })

        $(".web-currency").click(function(){
            currencyPath($(this).data("type"))
        })
        function currencyPath(val){
            const currency = moi.getUrlParam('currency');
            if(currency || location.href.indexOf('theme_id') > -1){
                location.href = moi.changeURLArg(location.href,"currency",val)
            }
            else{
                location.href = moi.addURLParam(location.href,"currency",val)
            }
        }
		
		
		$('.menu_icon a').click(function(){
            $('.mobile_menu').addClass('mobile_menu_on');
		})
		$('.mobile_menu').click(function(){
			$('.mobile_menu').removeClass('mobile_menu_on');
		})
		$('.mobile_menu_wrapper').click(function(e){
			e.stopPropagation();
		})


		$('#cart_icon').click(function(){
			$('.minicart').addClass('minicart_on');
            const html = $('.minicart').find(".minicart_mid").html();
            if(!html){
                miniCart();
            }
		})
        $('.minicart .close_btn').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart_wrapper').click(function(e){
			e.stopPropagation();
		})
		addCartNum();
        var nav = $('#nav');
        var navW = $('#nav').width();
        navMore(nav,navW);

        var scrollNav = $('#scroll_nav');
        var winWidth = $(window).width();
        var scrollNavWidth = $('#scroll_nav').width();
        if(winWidth < 1200){
            scrollNavWidth = winWidth - 800;
        }
        
        navMore(scrollNav,scrollNavWidth);
       
	})
    function navMore(d,w){
        var navWidth = w;
        var navUl = d.children('ul').width();
     
        if(navUl > navWidth){ 
            d.children('ul').children('li').each(function(){
                var left = $(this).position().left;
                var w = $(this).width();
                left += w;
                if(left > navWidth){
                    $(this).hide();
                    $(this).nextAll('li').hide();
                    return false;
                }
            })
            d.children('ul').append('<li class="more_link"><a class="nav-li-a" href="javascript:void(0)">More Link</a><div class="more_link_child"><div class="container_wrapper"></div></div></li>');
            var _html = d.children('ul').clone();
            d.find('.more_link_child').children('.container_wrapper').append(_html);
            d.find('.more_link_child').children('.container_wrapper').children('ul').children('li').each(function(){
                if($(this).is(':visible')){
                    $(this).remove();
                }else{
                    $(this).show();
                }
                
            })
            d.find('.more_link_child').children('.container_wrapper').children('ul').children('li').hover(function(){
                $(this).parent().siblings('.nav-child').remove();
                $(this).parent().children('li').removeClass('on');
                $(this).addClass('on');
                if($(this).children('.nav-child').length == 1){
                    var moreNav = $(this).children('.nav-child').clone();
                    $(this).parent().parent().append(moreNav);
                }
            })
            d.find('.more_link').hover(function(){
                $(this).addClass('on');
            },function(){
                $(this).removeClass('on');
            })
            
        }
        
        
        
    }
</script>

{% schema %}
{
    "tag": "",
    "class": "header",
    "is_global": true,
    "name": {
        "zh_CN": "头部"
    },
    "max_blocks": "0",
    "settings": [
    {
        "type": "card_header",
        "label": {
            "zh_CN": "菜单导航设置"
        }
    },
    {
        "type": "card_nav",
        "label": {
            "zh_CN": "选择菜单"
        },
        "default": {
            "id":"",
            "title":""
        },
        "id": "nav"
    },
    {
        "type": "card_header",
        "label": {
        "zh_CN": "顶部LOGO与图片"
        }
    },
    {
        "type": "card_image",
        "label": {
        "zh_CN": "LOGO图片"
        },
        "id": "logo_pic"
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "个人中心"
        },
        "id": "is_member",
        "default": "1"
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "货币切换"
        },
        "id": "is_currency",
        "default": "1"
    },
    {
        "type": "card_header",
        "label": {
                "zh_CN": "搜索"
        }
    },
    {
        "type": "card_color",
        "id": "header_search_bg",
        "label":
        {
            "en_US": "Search background",
            "zh_CN": "搜索背景"
        }
    },
    {
        "type": "card_color",
        "id": "header_search_text",
        "label":
        {
            "en_US": "Search text",
            "zh_CN": "搜索文字"
        }
    },
    {
        "type": "card_color",
        "id": "header_search_svg",
        "label":
        {
            "en_US": "Search button icon",
            "zh_CN": "搜索按钮图标"
        }
    },
    {
        "type": "card_input",
        "label": {
            "zh_CN": "搜索底纹"
        },
        "id": "search_placeholder"
    }],
    "blocks": [],
    "default": {
        "settings": {
            "nav": {
            "id":"",
            "title":""
        },
        "logo_pic": {
            "src":"",
            "alt":""
        },
        "is_member": true,
        "is_currency": true,
        "header_search_bg":"#e5e5e5",
        "header_search_text":"#000000",
        "header_search_svg":"#000000",
        "search_placeholder":"Search"
    },
    "blocks": []
}}

{% endschema %}